<template>
	<view class="body">
		<up-swiper :list="data.banner" indicator indicatorMode='dot' height="539rpx"></up-swiper>
		<view class="menu ww100 d-b-c pt20 pb20 pl80 pr80 bg-white mt25">
			<view class="item d-c-c d-c" @click="store.commit('jump', '/pages/home/new')">
				<image src="@/static/image/icon_index3.png" mode="widthFix"></image>
				<view class="name mt10 f24">新品系列</view>
			</view>
			<view class="item d-c-c d-c" @click="store.commit('jump', '/pages/home/list')">
				<image src="@/static/image/icon_index2.png" mode="widthFix"
					></image>
				<view class="name mt10 f24">定制选款</view>
			</view>
			<view class="item d-c-c d-c" @click="goTo">
				<image src="@/static/image/icon_index1.png" mode="widthFix"></image>
				<view class="name mt10 f24">全屋套餐</view>
			</view>
		</view>
		<view class="mt50 pl30">
			<view class=" d-s-e">
				<text class="f36">新品鉴赏</text>
				<view class="sub f20 ml10">感受潮流家居</view>
			</view>
			<swiper class="swiper mt20" next-margin='30rpx' :indicatorDots="false" indicator-dots autoplay>
				<swiper-item v-for="(item, index) in data.new_goods" :key="index">
					<view class="swiper-item ww100 hh100 pr20"
						@click="store.commit('jump', `/pages/detail/detail?id=${item.id}`)">
						<image :src="item.image" mode="aspectFill" class="ww100 hh100"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mt50 pl30 mt70">
			<view class=" d-s-e">
				<text class="f36">品牌介绍</text>
				<view class="sub f20 ml10">感受潮流家居</view>
			</view>
			<view class="pr30">
				<video class="mt20 ww100" :src="data.video.attachfile" controls :poster="data.video.image"></video>
			</view>
			<swiper class="swiper2 mt20" next-margin='100rpx' :indicatorDots="false" display-multiple-items='3'>
				<swiper-item v-for="(item, index) in data.article" :key="index" class="pr20"
					@click="store.commit('jump', `/pages/about/about?id=${index}`)">
					<view class="swiper-item ww100 hh100" :style="[{ backgroundImage: `url(${item.image})` }]">
						<view class="pos d-c-c">
							<text class="fb white fb name f28">{{ item.title }}</text>
							<view class=""><up-icon name="arrow-right" size="15" bold color="#fff"></up-icon></view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mt50 pl30 mr10 mt70">
			<view class=" d-s-e">
				<text class="f36">板材配置</text>
				<view class="sub f20 ml10">感受潮流家居</view>
			</view>
			<view class="list mt20">
				<image :src="item.image" mode="widthFix" class="ww100 mb20" v-for="(item, index) in data.board"
					:key="index"></image>
			</view>
		</view>
		<view class="mt35 pl30 pr30">
			<view class="d-s-e mb50">
				<text class="f36">服务流程</text>
				<view class="sub f20 ml10">90度家居实力派</view>
			</view>
			<view class="fw">
				<view class="item d-c-c d-c ">
					<image src="@/static/image/icon_index4.png" mode="widthFix"></image>
					<view class="f20 mt5">进店体验</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index5.png" mode="widthFix"></image>
					<view class="f20 mt5">上门量尺</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index6.png" mode="widthFix"></image>
					<view class="f20 mt5">方案设计</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index11.png" mode="widthFix"></image>
					<view class="f20 mt5">方案报价</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index10.png" mode="widthFix"></image>
					<view class="f20 mt5">安装验收</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index9.png" mode="widthFix"></image>
					<view class="f20 mt5">快捷送货</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index8.png" mode="widthFix"></image>
					<view class="f20 mt5">下单生产</view>
				</view>
				<view class="item d-c-c d-c">
					<image src="@/static/image/icon_index7.png" mode="widthFix"></image>
					<view class="f20 mt5">签订合同</view>
				</view>
			</view>
		</view>
		<view class="pl30 pr30 mt50">
			<view class="d-s-e mb50">
				<text class="f36">预约服务</text>
				<view class="sub f20 ml10">90度家居实力派</view>
			</view>
			<image @click="store.commit('jump', `/pages/user/appointment`)" src="@/static/image/index1.png" mode="widthFix" class="ww100 logo"></image>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
	banner: [
	],
	article: [],
	video: {},
	new_goods: [],
	board:[]
})
async function getData() {
	const res = await store.dispatch('request', {
		url: store.state.api.index,
		data: {

		}
	})
	if (res.code == 1) {
		data.banner = res.data.banner;
		data.article = res.data.article;
		data.video = res.data.video;
		data.new_goods = res.data.new_goods;
		data.board = res.data.board;
		uni.$mpShare = {
			title: '90度家居-全屋定制+家具+瓷砖',
			path: '/pages/index/index',
			imageUrl: data.banner[0],
		};
	}
}
function goTo() {
	uni.setStorageSync('is_home', 1)
	uni.switchTab({
		url: '/pages/index/home'
	});
}
onLoad(() => {
	getData()
})
</script>

<style scoped lang="scss">
.logo {
	margin-top: -120rpx;
}

.fw {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 100rpx;

	.item {
		position: relative;

		image {
			width: 90rpx;
		}

		&:nth-child(1),
		&:nth-child(2),
		&:nth-child(3) {
			&:after {
				content: "";
				right: -100%;
				top: 40%;
				transform: translate(-50%, 50%);
				position: absolute;
				background-image: url('@/static/image/icon_left.png');
				width: 50rpx;
				height: 12rpx;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}

		&:nth-child(5),
		&:nth-child(6),
		&:nth-child(7) {
			&:after {
				content: "";
				right: -100%;
				top: 40%;
				transform: translate(-50%, 50%);
				position: absolute;
				background-image: url('@/static/image/icon_right.png');
				width: 50rpx;
				height: 12rpx;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}

		&:nth-child(4) {
			&:after {
				content: "";
				// right: -100%;
				// top: 50%;
				transform: translate(50%, -50%);
				left: 40%;
				bottom: -90%;
				position: absolute;
				background-image: url('@/static/image/icon_bottom.png');
				width: 12rpx;
				height: 50rpx;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
	}

}

.list {
	image {
		margin-left: -20rpx;
	}
}

.swiper {
	height: 530rpx;
}

.swiper2 {
	height: 200rpx;

	.swiper-item {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 10rpx;
		position: relative;

		.pos {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;

			.name {
				width: 2em;
				line-height: 1.2;
			}
		}
	}
}

.menu {
	image {
		width: 65rpx;
	}
}
</style>